<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>san 框架</title>
    <style>
        body {
            margin: 0;
            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #34495e;
            padding-bottom: 300px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        a:hover {
            color: #2EA2F8;
        }

        .overlay {
            padding: 30px 0 50px;
            text-align: center;
            background-image: url(./assets/img/lowpoly.jpg);
            background-repeat: repeat-y;
            background-size: cover;
            background-color: #34495e;
            color: #fff;
            -webkit-animation: 150s scroll infinite linear;
            -moz-animation: 150s scroll infinite linear;
            -o-animation: 150s scroll infinite linear;
            -ms-animation: 150s scroll infinite linear;
            animation: 150s scroll infinite linear;
        }

        @-webkit-keyframes scroll {
            100% {
                background-position: 0px -3000px;
            }
        }

        @-moz-keyframes scroll {
            100% {
                background-position: 0px -3000px;
            }
        }

        @-o-keyframes scroll {
            100% {
                background-position: 0px -3000px;
            }
        }

        @-ms-keyframes scroll {
            100% {
                background-position: 0px -3000px;
            }
        }

        @keyframes scroll {
            100% {
                background-position: 0px -3000px;
            }
        }

        .logo {
            height: 220px;
        }

        .overlay h1 {
            font-size: 50px;
            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        .overlay p {
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, .6);
        }

        .overlay a {
            display: inline-block;
            margin-top: 30px;
            padding: 3px 58px;
            height: 38px;
            border-radius: 19px;
            background: #2EA2F8;
            color: #fff;
            line-height: 38px;
            font-size: 14px;
            letter-spacing: 0.05em;
            transition: all .5s ease;
        }

        .overlay a:hover {
            background: #ace5fe;
            color: #fff;
        }

        .w {
            width: 1080px;
            margin: 0 auto;
        }

        .nav {
            height: 60px;
            line-height: 60px;
            background: #EEF2F6;
            text-align: center;
        }

        .nav .logo {
            float: left;
            height: 60px;
            line-height: 60px;
        }

        .nav .logo img {
            vertical-align: middle;
            height: 50px;
        }

        .nav .note {
            float: right;
        }

        .nav-text:nth-child(3) {
            margin: 0 30px;
        }

        .example {
            margin: 120px 0;
        }

        .item {
            width: 33.3%;
            float: left;
            margin-bottom: 20px;
        }

        .item img {
            float: left;
            margin-right: 15px;
        }

        .item h3 {
            margin: 0;
            height: 42px;
            line-height: 42px;
            font-weight: 300;
            font-size: 16px;
            letter-spacing: 0.05em;
        }

        .clearfix::after,
        .clearfix::before {
            content: '.';
            display: block;
            height: 0;
            width: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="overlay">
        <img class="logo" src="./assets/img/logo-colorful.svg" title="San" alt="logo">
        <h1>San</h1>
        <p>A fast, portable, flexible JavaScript component framework</p>
        <a href="javascript:void(0);">GET STARTED</a>
    </div>
    <div class="nav">
        <div class="w">
            <a class="logo" href="#"><img src="./assets/img/logo-colorful.svg" alt="logo"></a>
            <a class="nav-text" href="#">特性</a>
            <a class="nav-text" href="#">资料</a>
            <a class="nav-text" href="#">周边</a>
            <a class="note" href="#">示例</a>
        </div>
    </div>
    <div class="example">
        <div class="w clearfix">
            <div class="item">
                <img src="./assets/img/icon.svg" alt="icon">
                <h3><a href="./tutorial/01data.html">示例1：数据绑定</a></h3>
            </div>
            <div class="item">
                <img src="./assets/img/icon.svg" alt="icon">
                <h3><a href="./tutorial/02if&for.html">示例2：条件和循环</a></h3>
            </div>
            <div class="item">
                <img src="./assets/img/icon.svg" alt="icon">
                <h3><a href="./tutorial/03style.html">示例3：样式控制</a></h3>
            </div>
            <div class="item">
                <img src="./assets/img/icon.svg" alt="icon">
                <h3><a href="./tutorial/04event.html">示例4：事件处理</a></h3>
            </div>
            <div class="item">
                <img src="./assets/img/icon.svg" alt="icon">
                <h3><a href="./tutorial/05form.html">示例5：表单实现Input、Checkbox组件</a></h3>
            </div>
        </div>
    </div>
</body>

</html>